<template>
  <view>
    <view class="car-input-container">
      <view v-for="(item, index) in inputList" :key="index" class="car-input-box" @click="plateInput(index)">
        <view
          :class="[curInput == index ? 'sel-item' : '', maxNum - 1 == index ? 'last-item' : '']"
          class="car-input-item"
        >
          <view :class="curInput == index ? 'sel-item-line' : ''"></view>
          <img v-if="maxNum - 1 == index" :src="xnyImgBase64" class="new-item-img" />
          {{ item }}
        </view>
      </view>
    </view>

    <view v-if="showKeyPop1" class="car-number-container">
      <view class="plate-close" @click="closeKeyboard">
        <text class="plate-close-btn">关闭</text>
      </view>
      <view class="plate-popup-list">
        <view
          v-for="(item, index) in keyProvince1"
          :key="index"
          class="plate-popup-item province-item"
          @click="tapKeyboard(item)"
        >
          {{ item }}
        </view>
      </view>
      <view class="plate-popup-list">
        <view
          v-for="(item, index) in keyProvince2"
          :key="index"
          class="plate-popup-item province-item"
          @click="tapKeyboard(item)"
        >
          {{ item }}
        </view>
      </view>
      <view class="plate-popup-list">
        <view
          v-for="(item, index) in keyProvince3"
          :key="index"
          class="plate-popup-item province-item"
          @click="tapKeyboard(item)"
        >
          {{ item }}
        </view>
      </view>
      <view class="plate-popup-list">
        <view
          v-for="(item, index) in keyProvince4"
          :key="index"
          class="plate-popup-item province-item"
          @click="tapKeyboard(item)"
        >
          {{ item }}
        </view>
        <!-- 删除 -->
        <view class="plate-popup-item province-item del" @click="onPlateDelTap">
          <image :src="deleteImgBase64" />
        </view>
      </view>
    </view>

    <view v-if="showKeyPop2" class="car-number-container">
      <view class="plate-close" @click="closeKeyboard">
        <text class="plate-close-btn">关闭</text>
      </view>
      <view class="plate-popup-list">
        <view
          v-for="(item, index) in keyEnInput1"
          :key="index"
          :class="lockInput.includes(item) ? 'lock-item' : ''"
          class="plate-popup-item"
          @click="tapKeyboard(item)"
        >
          {{ item }}
        </view>
      </view>
      <view class="plate-popup-list">
        <view
          v-for="(item, index) in keyEnInput2"
          :key="index"
          :class="lockInput.includes(item) ? 'lock-item' : ''"
          class="plate-popup-item"
          @click="tapKeyboard(item)"
        >
          {{ item }}
        </view>
      </view>
      <view class="plate-popup-list">
        <view
          v-for="(item, index) in keyEnInput3"
          :key="index"
          :class="lockInput.includes(item) ? 'lock-item' : ''"
          class="plate-popup-item"
          @click="tapKeyboard(item)"
        >
          {{ item }}
        </view>
      </view>
      <view class="plate-popup-list">
        <view
          v-for="(item, index) in keyEnInput4"
          :key="index"
          :class="lockInput.includes(item) ? 'lock-item' : ''"
          class="plate-popup-item"
          @click="tapKeyboard(item)"
        >
          {{ item }}
        </view>
        <!-- 删除 -->
        <view class="plate-popup-item del" @click="onPlateDelTap">
          <image :src="deleteImgBase64" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'car-number-input',
  emits: ['numberInputResult'],
  props: {
    defaultStr: {
      type: String,
      default: ''
    },
    plateNum: {
      type: String,
      default: ''
    }
    // maxNum: {
    // 	type: Number,
    // 	default: 8
    // },
  },
  data() {
    return {
      inputList: [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
      curInput: -1,
      maxNum: 8,
      showKeyPop1: false,
      showKeyPop2: false,
      keyProvince1: ['京', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '沪'],
      keyProvince2: ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
      keyProvince3: ['粤', '桂', '琼', '渝', '川', '贵', '云', '藏'],
      keyProvince4: ['陕', '甘', '青', '宁', '新', 'W'],
      keyEnInput1: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
      keyEnInput2: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'P', '学', '军'],
      keyEnInput3: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警'],
      keyEnInput4: ['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港', '澳'],
      lockInput: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
      xnyImgBase64:
        '',
      deleteImgBase64:
        ''
    };
  },
  watch: {
    defaultStr(val) {
      if (val != '' && val != null) {
        const valList = val.split('');
        for (let i in valList) {
          this.inputList[i] = valList[i];
        }
      }
    },
    curInput(val) {
      this.showOrHidePop(val);

      this.keyEnInput2 = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军'];
      switch (val) {
        case 1:
          this.lockInput = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '学', '军', '警', '港', '澳'];
          break;
        case 2:
          this.lockInput = ['O', '学', '军', '警', '港', '澳'];
          break;
        case 3:
          this.lockInput = ['O', '学', '军', '警', '港', '澳'];
          break;
        case 4:
          this.lockInput = ['O', '学', '军', '警', '港', '澳'];
          break;
        case 5:
          this.lockInput = ['O', '学', '军', '警', '港', '澳'];
          break;
        case 6:
          this.lockInput = ['O'];
          this.keyEnInput2 = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'P', '学', '军'];
          break;
        case 7:
          this.lockInput = ['O', '学', '军', '警', '港', '澳'];
          break;
        default:
          this.lockInput = [];
          break;
      }
    }
  },
  created() {
    if (this.defaultStr != '' && this.defaultStr != null) {
      const valList = this.defaultStr.split('');
      for (let i in valList) {
        this.inputList[i] = valList[i];
      }
    }
  },
  methods: {
    plateInput(e) {
      this.curInput = e;
      this.showOrHidePop(e);
    },
    showOrHidePop(val) {
      if (val == -1) {
        this.showKeyPop1 = false;
        this.showKeyPop2 = false;
      } else if (val == 0) {
        this.showKeyPop1 = true;
        this.showKeyPop2 = false;
      } else {
        this.showKeyPop1 = false;
        this.showKeyPop2 = true;
      }
    },
    tapKeyboard(e) {
      if (this.lockInput.includes(e)) {
        return;
      }

      this.inputList[this.curInput] = e;
      if (this.curInput < this.maxNum - 1) {
        this.curInput++;
      } else {
        this.curInput = -1;
      }

      this.emitResult();
    },
    closeKeyboard() {
      this.curInput = -1;
    },
    onPlateDelTap() {
      if (this.inputList[this.curInput] == ' ') {
        this.curInput--;
      }
      this.inputList[this.curInput] = ' ';

      this.emitResult();
    },
    emitResult() {
      const returnResult = this.inputList.join('');
      this.$emit('numberInputResult', returnResult);
    }
  }
};
</script>

<style lang="scss" scoped>
.car-input-container {
  position: relative;
  padding: 0 5px;
  height: 44px;

  .car-input-box {
    display: inline-block;
    width: 12.5%;
    height: 44px;
    vertical-align: middle;

    .car-input-item {
      position: relative;
      border: 1px solid #e2e2e2;
      height: 40px;
      line-height: 40px;
      width: 80%;
      margin-left: 10%;
      text-align: center;
      font-size: 17px;

      .sel-item-line {
        position: absolute;
        bottom: 3px;
        left: 15%;
        height: 2px;
        background-color: #2979ff;
        width: 70%;
      }

      .new-item-img {
        position: absolute;
        top: -6px;
        left: 50%;
        margin-left: -15px;
        height: 13px;
        width: 30px;
        z-index: 9;
      }
    }

    .sel-item {
      color: #2979ff;
    }

    .last-item {
      border: 1px solid #18bc37;
    }
  }
}

.car-number-container {
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 254px;
  background-color: #e3e2e7;
  -webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;

  .plate-close {
    height: 40px;
    line-height: 40px;
    text-align: right;
    background-color: #fff;

    .plate-close-btn {
      font-size: 13.5px;
      color: #555;
      margin-right: 15px;
    }
  }

  //键盘主体内容-单行
  .plate-popup-list {
    margin: 0 auto;
    overflow: hidden;
    display: inline-block;
    display: table;

    &:last-child {
      margin-bottom: 2px;
    }
  }

  //键盘主体内容-单个
  .plate-popup-item {
    float: left;
    font-size: 16px;
    width: 8vw;
    margin: 0 1vw;
    margin-top: 8px;
    height: 40px;
    line-height: 40px;
    background: #ffffff;
    border-radius: 5px;
    color: #4a4a4a;

    image {
      width: 16px;
      height: 16px;
      margin: 12px auto;
    }
  }

  .plate-popup-item:active {
    background-color: #eaeaea;
  }

  .province-item {
    width: 8.8vw;
  }

  .lock-item {
    color: #aaa;
  }
}
</style>
